<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
    <style>
        #d1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            /*纵向横向超出都会隐藏*/
            /* overflow: hidden;最常用的属性 */
            /*滚动条,不滚是否溢出都有滚动条，使用auto没溢出不会有滚动条*/
            overflow: scroll;


             /* x,y分别控制横向和纵向 ,实验特征，不推荐用*/
             /* overflow-x: scroll; */
             /* overflow-y: scroll; */
        }
        #d2 {
            width: 1000px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="d1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    <div id="d2">temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
        </div>
    temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id numquam neque omnis saepe fugit impedit eaque, nemo
    temporibus perferendis voluptatem unde velit culpa maxime, modi, quis dolorem sequi esse. Assumenda.


</div>
<hr>
</body>
</html>